<!--
 * @Description: 
 * @Date: 2025-04-02 11:27:18
 * @FilePath: 颜色混合.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
    <title>Document</title>
    <style>
      .wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .color {
        width: 300px;
        height: 300px;
        background-color: red;
      }
      .color1 {
        width: 300px;
        height: 300px;
        background-color: blue;
      }
      #result {
        width: 120px;
        height: 120px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="color1">
        <div id="picker"></div>
        <input id="hexInput" />
        <input
          type="number"
          id="numInput"
          min="0"
          max="100"
          step="1"
          value="50" />
      </div>
      <div>
        <button id="btn">混合</button>
        <div id="result"></div>
      </div>
      <div class="color">
        <div id="picker2"></div>
        <input id="hexInput2" />

        <input
          type="number"
          id="numInput2"
          min="0"
          max="100"
          step="1"
          value="50" />
      </div>
    </div>
  </body>
  <script>
    let color1 = '#ff0000';
    let color2 = '#0000ff';
    const hexInputDom = document.getElementById('hexInput');
    const hexInput2Dom = document.getElementById('hexInput2');
    hexInputDom.value = color1;
    hexInput2Dom.value = color2;
    const numInputDom = document.getElementById('numInput');
    const numInput2Dom = document.getElementById('numInput2');
    const btn = document.getElementById('btn');
    const resultDom = document.getElementById('result');
    const colorMixin = () => {
      let result = '';
      // 获取颜色值，注意这里应该使用已经存储的color1和color2变量
      // 而不是从DOM元素中获取value（因为picker元素没有value属性）
      const color1Hex = color1;
      const color1Per = parseInt(numInputDom.value) / 100;
      const color2Hex = color2;
      const color2Per = parseInt(numInput2Dom.value) / 100;
      // 将十六进制颜色转换为RGB
      const r1 = parseInt(color1Hex.slice(1, 3), 16);
      const g1 = parseInt(color1Hex.slice(3, 5), 16);
      const b1 = parseInt(color1Hex.slice(5, 7), 16);
      const r2 = parseInt(color2Hex.slice(1, 3), 16);
      const g2 = parseInt(color2Hex.slice(3, 5), 16);
      const b2 = parseInt(color2Hex.slice(5, 7), 16);
      // 按百分比混合颜色
      const r = Math.round(r1 * color1Per + r2 * color2Per);
      const g = Math.round(g1 * color1Per + g2 * color2Per);
      const b = Math.round(b1 * color1Per + b2 * color2Per);
      // 将RGB转回十六进制格式，确保每个颜色通道都是两位数
      const toHex = (num) => {
        const hex = num.toString(16);
        return hex.length === 1 ? '0' + hex : hex;
      };

      result = '#' + toHex(r) + toHex(g) + toHex(b);

      return result;
    };
    //
    const colorPicker = new iro.ColorPicker('#picker', {
      width: 300,
      height: 300,
      color: color1,
      margin: 10,
      padding: 10,
      borderWidth: 1,
      borderColor: '#fff',
    });
    colorPicker.on('color:change', function (color) {
      color1 = color.hexString;
      hexInputDom.value = color1;
    });
    const colorPicker2 = new iro.ColorPicker('#picker2', {
      width: 300,
      height: 300,
      color: color2,
      margin: 10,
      padding: 10,
      borderWidth: 1,
      borderColor: '#fff',
    });
    colorPicker2.on('color:change', function (color) {
      color2 = color.hexString;
      hexInput2Dom.value = color2;
    });
    // 添加十六进制输入框的输入事件监听
    hexInputDom.addEventListener('input', function () {
      if (/^#[0-9A-Fa-f]{6}$/.test(this.value)) {
        color1 = this.value;
        colorPicker.color.hexString = color1;
      }
    });

    hexInput2Dom.addEventListener('input', function () {
      if (/^#[0-9A-Fa-f]{6}$/.test(this.value)) {
        color2 = this.value;
        colorPicker2.color.hexString = color2;
      }
    });

    btn.addEventListener('click', function () {
      const result = colorMixin();
      resultDom.style.backgroundColor = result;
      resultDom.innerHTML = result;
    });
  </script>
</html>
